<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.css"/>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<style type="text/css">
			.hdiv{
				width: 60%;
				margin: auto;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 44px;
			}
			.hdiv>div{
				width: 50%;
				height: 35px;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: auto;
			}
			.hdiv>div:first-child{
				border-top-left-radius: 10px;
				border-bottom-left-radius: 10px;
			}
			.hdiv>div:last-child{
				border-top-right-radius: 10px;
				border-bottom-right-radius: 10px;
			}
			.ldiv{
				background-color: white;
				color: #0076FF;
			}
			.rdiv{
				background-color: rgba(27,130,209,1);
				color: white;
			}
			.main{
				width: 100%;
				background-color: white;
				padding: 0.5em;
				text-align: center;
			}
			img{
				margin: 1em 0;
				max-width: 80%;
			}
			.wmain{
				width: 200%;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				overflow-y: scroll;
				overflow-x: scroll;
				position: relative;
			}
			.zfb{
				width: 100%;
			}
			.wx{
				width: 100%;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    
		    <div class="hdiv" id="headid">
		    	<div class="ldiv" id="zfbid">
		    		支付宝
		    	</div>
		    	<div class="rdiv" id="wxid">
		    		微信
		    	</div>
		    </div>
		</header>
		<div class="mui-content">
			<!--
            	作者：592176224@qq.com
            	时间：2019-01-23
            	描述：
			<div class="wmain" id="pageid">
            -->
			<div class="zfb">
			    <div class="main">
			    	<p id="" style="color: red;">
			    		*注：上传您的支付宝二维码
			    	</p>
			    	<p id="" style="color: red;">
			    		以便销售员工销售时客户用支付宝扫码支付
			    	</p>
			    	<img id="zfbimgid" src="img/z001.png"/>
			    	<button id="subzfb" type="button" class="mui-btn mui-btn-blue mui-btn-block">上传支付宝二维码</button>
			    </div>
			    <div class="main">
			    	<p>进入支付宝，选择“收钱”</p>
			    	<img src="img/z002.jpg"/>
			    	<p>选择“保存图片”，将您的收款二维码保存至手机相册</p>
			    	<img src="img/z003.jpg"/>
			    	<p>打开我的，点击系统设置，选择“当面付设置”，点击图框，选择刚刚保存的收款二维码</p>
			    	<img src="img/z004.png"/>
			    	<p>选好图片，点击“上传二维码”，设置完成</p>
			    	<img src="img/z006.png"/>
			    </div>
		    </div>
		    
		    <div class="wx hidden">
			    <div class="main">
			    	<p id="" style="color: red;">
			    		*注：上传您的微信二维码
			    	</p>
			    	<p id="" style="color: red;">
			    		以便销售员工销售时客户用微信扫码支付
			    	</p>
			    	<img id="wximgid" src="img/z001.png"/>
			    	<button id="subwx" type="button" class="mui-btn mui-btn-blue mui-btn-block">上传微信二维码</button>
			    </div>
			    <div class="main">
			    	<p>进入微信，选择“我”，选择“支付”</p>
			    	<img src="img/w001.jpg"/>
			    	<p>选择“收款码”</p>
			    	<img src="img/w002.jpg"/>
			    	<p>点击“保存收款码”，将您的收款二维码保存至手机相册
			    	</p>
			    	<img src="img/w003.jpg"/>
			    	<p>打开我的，点击系统设置，选择“当面付设置”，点击微信,点击图框，选择刚刚保存的收款二维码</p>
			    	<img src="img/w004.png"/>
			    	
			    	<p>选好图片，点击“上传二维码”，设置完成</p>
			    	<img src="img/w005.png"/>
			    </div>
			    <!--
                	作者：592176224@qq.com
                	时间：2019-01-23
                	描述：
		    </div>
                -->
		    
		    </div>
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/camera.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var path_name = "";
			window.onload = function(){
				$("#headid").on("tap","div",function(e){
					if(this.id == "zfbid"){
						$(".wx").addClass("hidden").removeClass("show");
						$(".zfb").addClass("show").removeClass("hidden");
					}else if(this.id == "wxid"){
						$(".zfb").addClass("hidden").removeClass("show");
						$(".wx").addClass("show").removeClass("hidden");
					}
					$(this).removeClass("rdiv").addClass("ldiv").siblings().removeClass("ldiv").addClass("rdiv");
				})
				g("subzfb").addEventListener("tap",function(e){
					console.log("上传支付宝二维码");
					uppayimg("alipay")
				})
				g("subwx").addEventListener("tap",function(e){
					console.log("上传微信二维码");
					uppayimg("wxpay")
				})
				
				mui.plusReady(function(){
					
					g("zfbimgid").addEventListener("tap",function(e){
						page.imgUp("zfbimgid");  
					
					})
					g("wximgid").addEventListener("tap",function(e){
						page.imgUp("wximgid");  
					})
				})
				
				getpayimg();
			}
			/*
			 * 获取收款二维码
			 */
			function getpayimg(){
				var data = {
					url:"/api/store/get_receipt",
					data:{
						access_token:acctoken(),
					}
				}
				ajax(data,function(res){
					console.log("收款码二维码",res);
					if(res.data.alipay_url.length > 40){
						g("zfbimgid").src = res.data.alipay_url;
					}
					if(res.data.wxpay_url.length > 40){
						g("wximgid").src = res.data.wxpay_url;
					}
					
				})
			}
			function uppayimg(paytype){
				var data = {
					url:"/api/store/receipt_code",
					data:{
						access_token:acctoken(),
						field:paytype,
						path_url:path_name
					}
				}
				console.log(JSON.stringify(data));
				ajax(data,function(res){
					console.log(res);
					mui.toast(res.msg);
				})
			}
			
			var page=null;  
            page={  
                imgUp:function(imgid){  
                    var m=this;  
                    plus.nativeUI.actionSheet({cancel:"取消",buttons:[  
                        {title:"拍照"},  
                        {title:"从相册中选择"}  
                    ]}, function(e){//1 是拍照  2 从相册中选择  
                        switch(e.index){  
                            case 1:appendByCamera(function(res){getimg(res,imgid);});break;
                            case 2:appendByGalleryone(function(res){getimg(res,imgid);});break;
                        }  
                    });  
                }  
                //摄像头  
            } 
            
            function getimg(res,imgid){
            	console.log(res);
            	console.log(imgid);
            	getBase64Image(res,function(res2){
            		console.log(res2.dataURL);
                	console.log(res2.dataURL.length);
                	g(imgid).src = res2.dataURL;
                	var data = {
                		url:'/api/upload/image_base64',
                		data:{
                			access_token:acctoken(),
                			images:res2.dataURL
                		}
                	}
		                ajax(data,function(res3){
		                	console.log(res3);
		                	console.log(JSON.stringify(res3));
		                	console.log( hurl +"/uploads/images/"+ res3.data.name)
		                	g(imgid).src = hurl +"/uploads/images/"+ res3.data.name;
		                	path_name = res3.data.name
		            })
            	})
            	
            }
           
		
		</script>
	</body>

</html>